<template>
  <div>
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col v-for="(item,index) in userEnergy" :key="index" :span="3">
          <el-tag>
            {{ item.name }}:
            <span style="font-size: 18px;">{{ item.num ||0}}</span>个
          </el-tag>
        </el-col>
        <el-col :span="9">
          <el-button type="primary" @click="init">刷新</el-button>
          <el-button type="primary" @click="changeEnergyNum">修改能量球数量</el-button>
          <el-button type="primary" @click="showHistory()">中奖记录</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table
        ref="multipleTable"
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="tableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="name" label="名称"></el-table-column>
        <el-table-column align="center" prop="grade" label="等级"></el-table-column>

        <el-table-column align="center" prop="num" label="数量"></el-table-column>
        <el-table-column align="center" prop="add_type" label="增加或减少">
          <template slot-scope="scope">
            <span v-if="scope.row.add_type ==1" style="color:green ;">增加</span>
            <span v-if="scope.row.add_type ==2" style="color: red;">减少</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="赠送类型">
          <template slot-scope="scope">{{ scope.row.type ==1?'活动赠送':'亏损补偿' }}</template>
        </el-table-column>
        <el-table-column align="center" prop="admin_name" label="操作人"></el-table-column>
        <el-table-column align="center" prop="add_time" label="操作时间">
          <template slot-scope="scope">{{ returnAddTime(scope.row.add_time) }}</template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :total="query.total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-drawer
      title="修改能量球数量"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          style="padding: 0 30px;"
        >
          <el-form-item label="选择等级" prop="grade">
            <el-select v-model="ruleForm.grade" placeholder="请选择等级">
              <el-option
                v-for="(item,index) in userEnergy"
                :key="index"
                :label="item.name"
                :value="item.grade"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="增加或减少" prop="add_type">
            <el-radio-group v-model="ruleForm.add_type">
              <el-radio label="1">增加</el-radio>
              <el-radio label="2">减少</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="赠送类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio label="1">活动赠送</el-radio>
              <el-radio label="2">亏损补偿</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="修改数量" prop="num">
            <el-input-number
              :controls="false"
              style="widows: 100px;"
              :min="1"
              v-model="ruleForm.num"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-dialog
      title="能量球中奖纪录"
      :visible.sync="dialogVisible"
      width="80%"
      top="100px"
      :before-close="HishandleClose"
    >
      <el-table
        ref="multipleTable"
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="hisTableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
        <el-table-column align="center" prop="goods_name" label="奖品图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.img" alt style="max-width:150px" />
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.img"
              ></el-avatar>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="rule_name" label="中奖类型"></el-table-column>
        <el-table-column align="center" prop="add_time" label="中奖时间">
          <template slot-scope="scope">{{ returnAddTime(scope.row.add_time) }}</template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="hisQuery.currentPage"
          :total="hisQuery.total"
          @current-change="hisCurrentChange"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { userBoutique } from '@/api/consumer'
import {
  giveEnergyLog,
  giveEnergy,
  getEnergy,
  energylog
} from '@/api/energy.js'
import { parseTime } from '@/utils/index'
import { energyList } from '@/api/energy'
export default {
  props: {
    user_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        grade: [{ required: true, message: '请选择等级', trigger: 'change' }],
        add_type: [
          { required: true, message: '请选择增加加或减少', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择补偿类型', trigger: 'change' }
        ],
        num: [
          {
            type: 'number',
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }
        ]
      },

      drawer: false,
      direction: 'rtl',
      userEnergy: {},
      // 分页数据
      //input
      ruleForm: {
        add_type: '',
        grade: '',
        type: '',
        num: ''
      },
      query: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      hisQuery: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      hisTableData: [],
      tableData: [],
      delIds: [],
      is_show: true,
      optionsLevel: [],
      dialogVisible: false
    }
  },
  mounted() {
    // this.getUserCoupon();
  },
  watch: {
    user_id(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
    }
  },

  methods: {
    showHistory() {
      this.hisQuery.currentPage = 1
      this.getHistoryList()
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          giveEnergy(
            Object.assign(this.ruleForm, { user_id: this.user_id })
          ).then((res) => {
            if (res.st == 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.init()
              this.drawer = false
            } else {
              this.$message.error({
                message: res.msg,
                type: 'success'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.drawer = false
      this.$refs.ruleForm.resetFields()
      this.drawer = false
    },
    changeEnergyNum() {
      this.drawer = true
    },
    HishandleClose() {
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$refs.ruleForm.resetFields()
      this.drawer = false
    },
    queryAsk() {
      this.query.currentPage = 1
      this.getList()
    },
    init() {
      this.getList()
      getEnergy({
        user_id: this.user_id
      }).then((res) => {
        this.userEnergy = res.data
        console.log(res.data, 'asdsadas')
      })
    },
    getHistoryList() {
      energylog({
        user_id: this.user_id,
        page: this.hisQuery.currentPage,
        limit: this.hisQuery.pageSize
      }).then((res) => {
        this.hisTableData = res.data
        this.hisQuery.total = res.count
      })
    },
    getList() {
      giveEnergyLog({
        user_id: this.user_id,
        page: this.query.currentPage,
        limit: this.query.pageSize
      }).then((res) => {
        this.tableData = res.data
        this.query.total = res.count
      })
    },
    async giveEnergy() {
      const res = await giveEnergy({
        user_id: this.user_id,
        energy: this.userEnergy.energy
      })
    },
    async getUserBoutique() {
      const res = await userBoutique({})
    },
    //重置
    queryReset() {
      // this.resetForm('query')
      this.query.total = 0
      this.query.currentPage = 1
      this.query.pageSize = 10
    },
    hisCurrentChange(current) {
      console.log
      this.hisQuery.currentPage = current
      this.getHistoryList()
    },
    //分页改变
    currentChange(current) {
      this.query.currentPage = current
      this.getList()
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    returnAddTime(row) {
      return parseTime(row, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  }
}
</script>

<style lang='scss' scoped>
.box-card {
  margin-bottom: 10px;
}
</style>